<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .box {
            width: 500px;
            height: 400px;
            border: 1px solid #000;
            position: relative;
            margin: auto;
            overflow: hidden;
            cursor: pointer;
        }

        .box ul,
        .box ol {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .box ul li {
            width: 500px;
            height: 400px;
            display: none;
        }

        .box ul li img {
            width: 500px;
            height: 400px;
        }

        .box ol {
            width: 120px;
            position: absolute;
            left: 50%;
            margin-left: -40px;
            bottom: 20px;
            height: 20px;
            background: #fff;
            display: flex;
            justify-content: space-evenly;
            padding: 10px 0;
            border-radius: 20px;
        }

        .box ol li {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #f00;
            border: 1px solid #999;
        }

        .box ol li.current {
            background: #00f;
        }

        .box ul li.current {
            display: block;
        }

        .box .left,
        .box .right {
            position: absolute;
            top: 50%;
            width: 30px;
            height: 30px;
            margin-top: -15px;
            background: #ccc;
            text-align: center;
            line-height: 30px;
            text-decoration: none;
            font-weight: bold;
            color: #fff;
        }

        .left {
            left: 0;
        }

        .right {
            right: 0;
        }
    </style>

    <body>
        <div class="box">
            <ul>
                <li class="current"><img src="images/1.jpg" alt=""></li>
                <li><img src="images/2.jpg" alt=""></li>
                <li><img src="images/3.jpg" alt=""></li>
                <li><img src="images/4.jpg" alt=""></li>
            </ul>
            <ol>
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
            <a href="javascript:;" class="left">&lt;</a>
            <a href="javascript:;" class="right">&gt;</a>
        </div>
    </body>
    <script type="text/javascript">
        /*
            实现功能
            1、自动切换图片 保证小圆点跟随
            2、上一张下一张点击切换图片  小圆点也需要跟随
            3、点击小圆点 切换到对应的图片
        */
        var index = 0;
        var liDom = document.querySelectorAll('ul>li');
        var circleDom = document.querySelectorAll('ol>li');
        var left = document.querySelector('.left');
        var right = document.querySelector('.right');
        left.onclick = function () {
            clearInterval(timer);
            index--;
            if (index < 0) {
                index = 3
            }
            gn();
        }
        right.onclick = function () {
            clearInterval(timer);
            fn();
        }
        circleDom.forEach(function (item, key) {
            item.onclick = function () {
                clearInterval(timer);
                gn();
            }
        })
        function fn() {
            index++;
            if (index > 3) {
                index = 0;
            }
            gn()
        }
        function gn(){
            document.querySelector('ul>.current').removeAttribute('class');
            liDom[index].className = 'current';
            document.querySelector('ol>.current').removeAttribute('class');
            circleDom[index].className = 'current';
        }
        var timer=setInterval(fn,1000);
    </script>
</body>

</html>